<template>
	<view class="index">
		<!-- 个人资料 -->
		<view class="personalData">
			<view class="personaDataBg">

			</view>
		</view>
		<!-- 导航 -> 礼包、游戏圈、视频 -->
		<view class="nav">
			<view v-for="(item,index1) in navData" :key="item.id" class="navImg">
				<img :src="item.url" alt="">
				<view class="navText">
					{{item.text}}
				</view>
			</view>


		</view>
		<!-- 分割线 -->
		<view class="line">

		</view>
		<!-- 好友动态 -->
		<!-- title -->
		<view v-for="(item,index2) in playInfo" :key="item.id">
			<view>
				<view class="friendUpdates">
					<view class="timeLine">
						<view class="time">
							{{item.id == 1 ? '今日好友新鲜事' : item.id == 2 ? "昨日" : item.id == 3 ?'前天' :"三天前" }}
						</view>
						<view class="round">
							·
						</view>
						<view class="partakeNum">
							{{item.friendNum}}位好友参战
						</view>
					</view>
					<view v-for="(playerNum,index3) in item.playerList" class="dynamicContent">
						<view style="padding: 0 20px;">
							<!-- 动态信息头 -->
							<view class="dynamicContentTitle">
								<view class="headSculpture">
									<img src="../../static/image/indexImage/defaultUserProfile.png" alt="">
								</view>
								<view class="info">

									<view class="infoTitle">
										<view class="infoTitleName">
											{{playerNum.playerName}}
										</view>
										<view class="infoTitleNews">
											{{playerNum.playerNews}}
										</view>
									</view>
									<view class="infoRank">
										{{playerNum.playerRank}}
									</view>
								</view>
							</view>
							<!-- 动态图片 -->
							<view class="dynamicContentImg">
								<img src="../../static/image/indexImage/5kill.jpg" alt="">
							</view>
							<!-- 动态详情 -->
							<view
								:style="[{height:playerNum.matchList.length == 1 ? 38+'px' : playerNum.matchList.length == 2 ? 76+'px' : ''},{borderRadius:playerNum.matchList.length == 1 ? '4px 4px 4px 4px' :''}]"
								:class="['dynamicContentDetailed' + index2 +index3,isAuto == 'dynamicContentDetailed' + index2 +index3 && isWho == false ? fstyle.aheight :  fstyle.fheight]"
								class="dynamicContentDetailed">
								<view v-for="(battleDetails,index4) in playerNum.matchList" :key="item.id"
									:style="{	borderRadius:playerNum.matchList.length == 1 ? '0 0 0 0 ' : playerNum.matchList.length > 2 ? '4px 4px 0 0 ' : '4px'}"
									class="combatDetails">
									<view class="left">
										<view class="combatDetailsHead">
											<img src="../../static/image/indexImage/126.jpg" alt="">
										</view>
										<view class="heroName">
											{{battleDetails.heroName}}
										</view>
										<view class="type">
											{{battleDetails.type === '0' ? '娱乐' :'排位'}}
										</view>
										<!-- 分割线 -->
										<view>
											|
										</view>
										<view class="combatParameters">
											{{battleDetails.kill}}杀/{{battleDetails.die}}死/{{battleDetails.holdingAttack}}助攻
										</view>
									</view>
									<view class="right">
										<view class="killNum">
											四杀
										</view>
										<view style="font-size: 12px; color: #ccc; margin: 0 3px;">
											|
										</view>
										<view class="isWin" :class="battleDetails.isWin ? 'golden' :'grey'">
											{{battleDetails.isWin ? '胜利' :'失败'}}
										</view>
										<!-- <uni-icons type="right" size="15"></uni-icons> -->
										<view class="rightIcon">
											<uni-icons custom-prefix="iconfont" type="icon-xiangyoujiantou"
												size="10"></uni-icons>
										</view>
										<!-- <span class="iconfont">&#xec8c;</span> -->
										<!-- <span style="width: 10px; color: red;" class="iconfont icon-dianzan_kuai"></span> -->
									</view>

								</view>

							</view>
							<view v-if="playerNum.matchList.length> 2 "
								@click="developUpClic('dynamicContentDetailed',index2,index3)" class="developUp">
								<view class="num">
									共{{playerNum.matchList.length}}局精彩对局
								</view>
								<view class="developUpIcon">
									<uni-icons v-if="true" custom-prefix="iconfont" type="icon-zhankai"
										size="20"></uni-icons>
								</view>
							</view>
							<!-- 点赞 -->
							<view class="giveTheThumbsUp">
								<uni-icons v-if="true" custom-prefix="iconfont" type="icon-dianzan"
									size="20"></uni-icons>
								<uni-icons v-if="false" custom-prefix="iconfont" type="icon-dianzan_kuai"
									size="20"></uni-icons>
							</view>
							<view v-if="playerNum.helpName.length >=  1 ? true :false" class="giveTheThumbsUpPeoples">
								<view v-for="giveTheThumbsUpPeoplesName in playerNum.helpName"
									class="giveTheThumbsUpPeoplesName">
									{{giveTheThumbsUpPeoplesName}} 、
								</view>

								<view class="giveTheThumbsUpText">
									赞了这条动态
								</view>
							</view>

						</view>
						<view style="margin-bottom: 10px;" class="bottomLine">

						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		indexData
	} from '../../mockData/indexData/indexData.js'
	export default {
		data() {
			return {
				navData: indexData.navData,
				playInfo: indexData.playInfo,
				isAuto: '',
				isWho: null,
				fstyle: {
					fheight: 'fheight',
					aheight: 'aheight'
				},

			}
		},
		onLoad() {

		},
		created() {
			console.log(222)
		},
		methods: {
			//展开收起对局

			developUpClic(v, i1, i2) {
				// console.log((this.$refs.giveTheThumbsUpPeoples))
				// console.log((document.querySelector('giveTheThumbsUpPeoples')))
				// this.$nextTick(() => {
				// 	// console.log(document.getElementById('giveTheThumbsUpPeoples'))
				// 	// console.log(document)
				// 	// let dom = wx.createSelectorQuery('giveTheThumbsUpPeoples')
				// 	// console.log(dom)
				// })
				this.isAuto = v + i1 + i2
				console.log((v + i1 + i2))
				// 	console.log(res)
				// 	// console.log(v+i1+i2)

				uni.createSelectorQuery().select(`${'.'+v+i1+i2}`).boundingClientRect((res) => {
					console.log(res.height)

					if (res.height > 77) {
						this.isWho = true

					} else {
						this.isWho = false
					}

					console.log(this.isWho)
				}).exec()
			}
		}
	}
</script>

<style lang="less" scoped>
	.index {
		.personalData {
			height: 230px;
			background-image: url(https://www.wca.com.cn/d/file/86ea4826d10a2729d872f698a3df862e.jpg);
			background-size: 100% 100%;

			.personaDataBg {}
		}

		.nav {
			padding: 20px 30px;
			display: flex;
			justify-content: space-between;

			.navImg {
				display: flex;
				align-items: center;
				flex-direction: column;

				img {
					height: 30px;
					width: 30px;
					text-align: center;
				}

				.navText {
					padding-top: 5px;
					font-size: 12px;
					font-weight: 600;
				}

			}
		}

		.line {
			margin-bottom: 10px;
			height: 4px;
			background-color: #eaeaea;
		}

		.friendUpdates {

			.timeLine {
				display: flex;
				padding: 10px 20px;
				padding-bottom: 20px;
			}

			.time {
				font-size: 14px;
				font-weight: 700;
			}

			.round {
				color: #ccc;
				padding: 0 6px;
			}

			.partakeNum {
				font-size: 12px;
				display: flex;
				// align-items: center;
				color: #ccc;
			}
		}

		.dynamicContent {
			.dynamicContentTitle {
				display: flex;

				.headSculpture {
					display: flex;
					align-items: center;
					border-radius: 50%;

					img {
						height: 24px;
						width: 24px;
						vertical-align: bottom;
					}
				}

				.info {
					.infoTitle {
						display: flex;

						.infoTitleName {
							font-size: 14px;
							font-weight: 600;
							margin: 0 8px;

						}

						.infoTitleNews {
							font-size: 12px;
							display: flex;
							align-items: center;
						}
					}

					.infoRank {
						margin-top: 2px;
						display: flex;
						justify-content: center;
						align-items: center;
						border: 1px solid #CD7F32;
						width: 50px;
						border-radius: 2px;
						color: #CD7F32;
						font-size: 10px;
						margin-left: 8px;
					}
				}
			}

			.dynamicContentImg {
				height: 200px;
				padding-top: 10px;
				padding-left: 32px;

				img {
					width: 100%;
					height: 100%;
					border-radius: 5px 5px 0 0;
				}
			}

			.dynamicContentDetailed {
				margin-left: 32px;
				border: 1px solid #ccc;
				height: 76px;
				overflow: hidden;
				// border-top: 0;
				border-radius: 4px 4px 0 0;
				border-bottom: 0;

				.combatDetails {
					padding: 10px 6px;
					display: flex;
					justify-content: space-between;
					border-bottom: 1px solid #ccc;


					.left {
						display: flex;
						font-size: 12px;
						color: #ccc;

						.combatDetailsHead {
							img {
								width: 16px;
								height: 16px;
								margin-right: 5px;
								vertical-align: top;
							}
						}

						.heroName {}

						.type {
							margin: 0 4px;
						}

						.combatParameters {
							margin-left: 4px;
						}
					}

					.right {
						display: flex;
						align-items: center;

						.killNum {
							font-size: 12px;
							color: #ccc;
						}

						.rightIcon {
							margin-top: -4px;
							margin-left: 5px;

						}

						.isWin {
							font-size: 12px;
						}

						img {
							width: 10px;
							height: 10px;
						}
					}
				}


			}

			.developUp {
				display: flex;
				align-items: center;
				margin-left: 32px;
				border: 1px solid #ccc;
				border-top: 0;
				border-radius: 0 0 4px 4px;

				.num {
					font-size: 12px;
					padding: 10px 6px;
				}

			}

			.giveTheThumbsUp {
				padding-left: 32px;
				padding-top: 10px;
			}

			.giveTheThumbsUpPeoples {
				display: flex;
				padding: 15px 32px;
				padding-top: 10px;

				.giveTheThumbsUpPeoplesName {
					font-size: 12px;
					font-weight: 700;
				}

				.giveTheThumbsUpText {
					font-size: 12px;
					font-weight: 600;
					color: #ccc;
					margin-left: 5px;
				}
			}
		}
	}

	.bottomLine {
		height: 1px;
		background-color: #ccc;
		margin-left: 20px;
	}

	.golden {
		color: #CD7F32;
	}

	.grey {
		color: grey;
	}

	.fheight {
		height: 76px;
	}

	.aheight {
		height: auto !important;
	}
</style>